import React, { Component } from "react";
import { connect } from 'react-redux';
import {fromJS} from 'immutable';
import { Card } from 'antd-mobile';
import { actionCreators } from "./store";
import AdList from './components/adList';
import { NewsDetails } from './style';
class Detail extends Component {
    render() {
        let { details, hotData } = this.props;
        console.log(1213, '----999',)
        if (JSON.stringify(details) === "{}") {
            return (<div></div>)
        } 
        return (
            <NewsDetails>
                <Card full>
                    <Card.Header
                        title={details.title}
                        thumb={details.user.avatar}
                        thumbStyle={{
                            width: '50px',
                            border: '1px solid #dedede',
                            borderRadius: '50px',
                        }}
                    />
                    <Card.Body>
                        <div >
                            <div>
                                <img alt={details.title} src={details.user.avatar} />
                            </div>
                            <p style={{
                                padding: "10px"
                            }}>{details.public_abbr}</p>
                        </div>
                    </Card.Body>
                    <Card.Footer content={details.likes_count} extra={<span>{details.total_fp_amount}</span>} />
                </Card>
                <AdList data={hotData} type={this.props.match.params.type} />
            </NewsDetails>)
    }
    // q切换路由
    componentWillUpdate(nextProps) {
        if (nextProps.location.pathname !== this.props.location.pathname) {
            let { id, type } = nextProps.match.params;
            let obj = { id, type: Number(type) }
            this.props.detail(obj);
        }
    }
    componentDidMount() {
        let { id, type } = this.props.match.params;
        let obj = { id, type: Number(type) }
        this.props.detail(obj)
    }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
    return {
        details: state.getIn(["news", "content"]).toJS(),
        hotData: state.getIn(["news", "list"]).toJS(),
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        detail(obj) {
            dispatch(actionCreators.detail(obj, () => {
                document.documentElement.scrollTop = document.body.scrollTop = 0;
            }))
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)
